<template>
	<view>
		<u-navbar :is-back="true" :border-bottom="false" height="46" title="图集规范详情" title-color="#333" :title-size="36"
		 :title-bold="true">
			<view class="navbar-right" slot="right" @click="onShareType(0)">
				<view class="message-box right-item">
					<u-icon name="zhuanfa" size="38" style="margin-right: 30rpx;"></u-icon>
				</view>
			</view>
		</u-navbar>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<view class="pradet_top">
			<view class="pardet_top_text">
				{{details.title}}
			</view>
			<view class="pardet_data">
				<view class="pardet_label">
					<text>{{details.tags}}</text>
					<text>{{details.colname2}}</text>
				</view>
				<view class="pardet_ioc">
					<view class="details_tab_sc">
						<u-icon name="star" size="32" style="margin-right: 15rpx"></u-icon>
						{{details.sccounts}}
						<!-- {{Number(details.sccounts) + num > 0 ? Number(details.sccounts) + num : 0}} -->
					</view>
					<view class="details_tab_sc">
						<u-icon name="eye" size="32" style="margin-right: 15rpx;margin-left: 30rpx;"></u-icon>{{details.counts}}
					</view>
				</view>
			</view>
		</view>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<u-parse :html="details.ncontent" style="padding: 30rpx;" class="details-box"></u-parse>
		<u-gap height="20" bg-color="#F7F7F7"></u-gap>
		<view class="details-more_box">
			<view class="details_more">
				<view class="details_more_text">
					更多内容
				</view>
				<atlas-cont :atlascont="atlaslist" style="padding-bottom: 104rpx;"></atlas-cont>
			</view>
			<view class="details_tab">
				<view class="details_tab_sc" @click="GoCollection(3305,details.id,details.title,details.wjlx)">
					<u-icon name="star" size="40" :color="iconColor" style="margin-right: 15rpx"></u-icon>收藏
				</view>
				<view class="details_tab_xz"  @click="GoDownload">
					立即下载
				</view>
				<view class="details_tab_sc" @click="Preview">
					<u-icon name="eye" size="40" style="margin-right: 15rpx"></u-icon>预览
				</view> 
			</view>
			<u-toast ref="uToast" />
		</view>

	</view>
</template>

<script>
	import { commonGet } from "@/api/commonapi.js"
	import AtlasCont from "../atlas/childComps/AtlasCont.vue"
	import ShareMerge from "@/common/ShareMerge.js"
	import Collection from "@/common/Collection.js"
	export default {
		mixins: [ShareMerge, Collection],
		data() {
			return {
				id: 0,
				details: [],
				atlaslist: [],
				url: "",
				show: true,
				stype: "5",
				spageid: "3305",
				title: "",
				xzshow:true,
				shareUrl: "",
				shareTitle:"" ,
				shareContent:"", 
				shareImg:"",
				creatememid:"",
				img:"",
			} 
		},
		async onLoad(options) {
			this.id = options.id
			await this.getDram();
			await this.Collection();
			if (this.$store.state.userIn) {
				this._creatememid = JSON.parse(this.$store.state.userIn).id
			}
		},
		methods: {
			async getDram() {
				let _this = this
				let params = {
					cmd: 'nFiles_query_proc_ui',
					para: {
						id: this.id
					}
				}
				const res = await this.$u.api.getDram(params)
				this.atlaslist = res.Data.Datas1
				for (var value of this.atlaslist.values()) {
					value.wjlx = this.baseUrl + value.wjlx
				}
				let reg = /src="/g;
				this.details = res.Data
				this.img =res.Data.wjlx
				this.details.ncontent = this.details.ncontent.replace(reg, 'src="' + this.baseUrl)
				this.title = this.details.title
				
				this.shareTitle=this.details.title
				this.shareContent=this.details.ndesc
				this.shareImg=this.baseUrl + this.details.wjlx 
				console.log(this.details)
			},
			Preview() {
				this.$u.route('/components/common/WebView', {
					id: this.id
				});
			},
			GoDownload() {
				let $t = this
				if (!this.$store.state.token) {
					this.$u.route('/pages/myuser/user/UserInfo')
				} else {
					if($t.xzshow){
						$t.xzshow=false
						const downloadTask = uni.downloadFile({
							url: this.baseUrl + this.details.wjlj, //文件链接
							success: (res) => {
								if (res.statusCode === 200) {
									if($t.$store.state.userIn){
										var _creatememid = JSON.parse($t.$store.state.userIn).id
									}
									let query = {
										ak:$t.$store.state.token,
										cmd:"nFilesDown_add_proc",
										para:JSON.stringify({
											id:$t.details.id,
											_creatememid:_creatememid
										})
									}
									commonGet(query,({Message})=>{
										if(Message=="操作成功！"){
											this.$refs.uToast.show({title: '下载成功',type: 'success',})
										}
									})
									uni.saveFile({
										tempFilePath: res.tempFilePath,
										success: (red) => {
											uni.openDocument({
												filePath: red.savedFilePath,
												success: function(res) {
														$t.xzshow=true 
												} 
											});
										}
									});
								}
							},
							fail: (err) => {
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '失败请重新下载',
								});
							},
						})
					}else{
						$t.$refs.uToast.show({
							title: "下载中请勿重复点击",
							icon:false,
							duration:800,
						})
					}
				
				}
			},
		},
		components: {
			"atlas-cont": AtlasCont
		}
	}
</script>

<style scoped lang="scss">
	.pradet_top {
		padding: 30rpx 30rpx 35rpx 30rpx;

		.pardet_top_text {
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
			margin-bottom: 28rpx;
		}

		.pardet_data {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.pardet_label {
				font-size: 20rpx;
				color: #C40200;

				text {
					&:last-child {
						margin-left: 40rpx;
					}

					display: inline-block;
					padding: 6rpx;
					border: 1rpx solid #C40200;
					border-radius: 5px;
				}
			}

			.pardet_ioc {
				display: flex;
				color: #808080;
			}
		}
	}


	.details-more_box {
		background-color: #fff;

		.details_more_text {
			padding: 40rpx 30rpx 0;
			font-size: 34rpx;
			font-weight: bold;
			color: #000000;
		}

		.details_tab {
			border-top: 2rpx solid #e5e5e5;
			padding: 10rpx 30rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 104rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.details_tab_sc {
				display: flex;
				font-size: 28rpx;
				color: #383838;
			}

			.details_tab_xz {
				width: 278rpx;
				height: 84rpx;
				background: #C40200;
				border-radius: 42rpx;
				color: #fff;
				line-height: 84rpx;
				text-align: center;
				font-size: 32rpx;
			}
		}
	}

	/deep/.details-box h1 {
		color: #000;
		cursor: pointer;
		font-size: 28rpx !important;
		text-align: left;
	}

	/deep/.details-box h1 span {
		color: #000;
		font-size: 24rpx !important;
	}

	/deep/.details-box h2 {
		text-indent: 40rpx;
		cursor: pointer;
	}

	/deep/.details-box h2,
	/deep/.details-box h2 span {
		font-size: 28rpx !important;
	}

	/deep/.details-box {
		p {
			display: none;
		}
	}
</style>
